import { reactive, toRefs } from 'vue'
// 监控鼠标移动的坐标
const position = reactive({
  x: 0,
  y: 0
})

// x,y实际上是对象，访问他们的值需要value属性
const { x, y } = toRefs(position)

// 控制坐标的修改
const move = (e) => {
  // position.x = e.clientX
  // position.y = e.clientY
  x.value = e.clientX
  y.value = e.clientY
}

// 监听鼠标的移动事件
const bindEvent = () => {
  document.addEventListener('mousemove', move)
}

// 组件销毁时，解绑事件
const unbindEvent = () => {
  document.removeEventListener('mousemove')
}

export default {
  x,
  y,
  bindEvent,
  unbindEvent
}
